<template>
  <div>
    <!-- 面包屑 -->
    <v-mb></v-mb>

    <!-- 按钮 -->
    <el-button type="primary" plain size='small' class='mg20' @click="add">添加</el-button>

    <!-- 列表 -->
    <v-list @edit='edit'></v-list>

    <!-- 弹框 -->
    <v-dialog :isShow='isShow' :isAdd='isAdd' @cancel='cancel' ref='dialog'></v-dialog>

  </div>
</template>

<script>
/* 
  1.定义dialog组件，注释掉表单相关的内容，center
  2.父组件定义一个变量，控制弹框的显示（父传子）
  3.点击添加，显示弹框
 */
import vList from "./list.vue"
import vDialog from "./dialog.vue"
export default {
  components:{
    vList,
    vDialog
  },
  //定义数据
  data(){
    return {
      isShow:false, //标识是否显示弹框
      isAdd:true,  //标识当前是添加(true)还是编辑(false)
    }
  },
  //方法
  methods:{
    //1.点击添加按钮，显示弹框   isShow=true
    add(){
       this.isShow = true;
       this.isAdd = true;
    },
    //2.子组件点击了取消按钮，父组件修改isShow
    cancel(){
      this.isShow = false;
    },
    //3.点击编辑按钮
    edit(id){
      this.isShow = true;
      this.isAdd = false;

      //调用子组件的方法，获取数据，进行数据回显
      this.$refs.dialog.lookup(id);
    }
  }
};
</script>

<style>
</style>